<template>
  <div class="right_login">
    <h2 style="text-align: center">登录</h2>
    <el-form
        class="login_form"
        ref="form"
        :model="form"
        label-width="80px"
        :rules="loginRules"
        @keyup.enter.native="onSubmit"
        v-loading="loading"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" placeholder="请输入密码" :type="passwordType">
          <template #suffix>
            <i @click="updatePasswordType" class="el-icon-view"></i>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="验证码" prop="code">
        <el-row>
          <el-col :span="15">
            <el-input v-model="form.code" placeholder="请输入验证码"></el-input>
          </el-col>
          <el-col :span="8" :offset="1">
            <template>
              <el-skeleton :animated="true" :loading="loadingCode">
                <template slot="template">
                  <el-skeleton-item variant="image" style="width: 120px; height: 40px;"/>
                </template>
                <template>
                  <img class="code_img" @click="code" :src="codePath" alt="验证码"/>
                </template>
              </el-skeleton>
            </template>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item>
        <el-button class="login_btn" type="primary" @click="onSubmit">登录</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import {getCode} from "@/api/auth/login";

export default {
  components: {},
  data() {
    return {
      loadingCode: true,
      loading: false,
      form: {
        username: "admin",
        password: "123",
      },
      passwordType: "password",
      codePath: "",
      loginRules: {
        username: [{required: true, message: "请输入用户名", trigger: "blur"}],
        password: [{required: true, message: "请输入密码", trigger: "blur"}],
        code: [{required: true, message: "请输入验证码", trigger: "blur"}],
      },
    };
  },
  created() {
    this.code();
  },
  methods: {
    updatePasswordType() {
      this.passwordType === "password"
          ? (this.passwordType = "")
          : (this.passwordType = "password");
    },
    code() {
      getCode().then((res) => {
        this.codePath = res.data.data.img;
        this.form["key"] = res.data.data.key;
        this.loadingCode = false
      });
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          this.$store.dispatch("LoginByUsername", this.form).then(() => {
            this.$router.push("/");
          });
          this.loading = false
        }
      });
    },
  },
};
</script>
<style scoped>
.login_btn {
  width: 260px;
  text-align: center;
}

.login_form {
  padding: 0 60px;
}

.code_img {
  width: 120px;
  height: 40px;
  border-radius: 5px;
}

h1 {
  text-align: center;
}

.right_login {
  position: fixed;
  top: 200px;
  left: calc(50% - 250px);
  height: 350px;
  width: 500px;
  border-radius: 5px;
  border: 1px solid rgb(231, 230, 230);
  box-shadow: 0 2px 12px 10px rgba(0, 0, 0, 0.3);
  background-color: rgb(250, 250, 250);
}

</style>
